<template>
  <div ref="wapper">
    <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  props: {
    // scroll 事件 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
    probeType: {
      type: Number,
      default: 1
    },
    // better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。
    click: {
      type: Boolean,
      default: true
    },
    // 数据
    data: {
      type: Array,
      default: null
    },
    onscroll: {
      type: Boolean,
      default: false
    },
    pullUpLoad: [Boolean, Object]
  },
  mounted () {
    setTimeout(() => {
      this._initScroll()
    }, 20)
  },
  methods: {
    _initScroll () {
      this.$nextTick(() => {
        if (!this.$refs.wapper) return
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wapper, {
            probeType: this.probeType,
            click: this.click,
            pullUpLoad: this.pullUpLoad
          })
        } else {
          this.refresh()
        }
        if (this.onscroll) {
          this.scroll.on('scroll', (pos) => {
            this.$emit('scroll', pos)
          })
        }
        if (this.pullUpLoad) {
          this._initPullUpLoad()
        }
      })
    },
    _initPullUpLoad () {
      this.scroll.on('pullingUp', () => {
        this.isPullUpLoad = true
        this.$emit('pullingUp')
      })
    },
    // 当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
    finishPullUp () {
      this.scroll && this.scroll.finishPullUp()
    },
    // 将better-scroll方法代理下
    // 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
    refresh () {
      this.scroll && this.scroll.refresh()
    },
    // 启用 better-scroll
    enable () {
      this.scroll && this.scroll.enable()
    },
    // 禁用 better-scroll
    disable () {
      this.scroll && this.scroll.disable()
    },
    // 滚动到某位置
    scrollTo () {
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    // 滚动到某元素
    scrollToElement () {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    },
    on (type, fn) {
    }
  },
  watch: {
    data (news, old) {
      if (news) {
        setTimeout(() => {
          this.refresh()
        }, 0)
      }
    }
  }
}
</script>

<style scoped>
</style>